import { fa } from "element-plus/es/locale";
import { ECOption } from "../config";
import { ref } from "vue";

export const usePieHook = (props: any, emits: any) => {
  const option: ECOption = {
    title: {
      text: props.info.title,
      subtext: props.info.desc,
      left: "left"
    },
    width:700,
    height:800,
    // minAngle: 5,           　　 //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
    avoidLabelOverlap: true,   //是否启用防止标签重叠策略
    tooltip: {
      trigger: "item"
    },
    legend: {
      // orient: "vertical",
      type: 'scroll',
      left: "right",
      orient: 'horizontal', // vertical
    },

    series: [
      {
        name: props.info.title,
        type: "pie",
        radius: "50%",
        label: {
          // show:false,
          formatter: function (params: any) {
            return (
              "{a|" +
              params.name +
              "}\n{b|" +
              "占比: " +
              params.data?.percent +
              "}\n{c|" +
              "数量: " +
              params.value +
              "}"
            );
          },
          rich: {
            a: {
              color: "#000",
              lineHeight: 24
            },
            b: {
              color: "#666",
              fontSize: 12,
              lineHeight: 24
            },
            c: {
              color: "#666",
              fontSize: 12,
              lineHeight: 24
            }
          }
        },
        data: props.data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }

    ]
  };

  const projectData = ref<any[]>([]);

  const handlePieClick = (e: any) => {
    if (e.event.target.style.text) {
      projectData.value = e.data.dataList;
      showDrawer.value = true;
    } else {
      emits('querySubPieData', e.data)
    }
  };

  /**
   * 抽屉逻辑
   */
  const showDrawer = ref(false);

  const closeDraw = () => {
    showDrawer.value = false;
  };

  const goDetailPage = (id: string, searchType: any) => {
    window.open(
      `${location.origin}/detail?id=${id}&searchType=${searchType}`,
      "_blank"
    );
  };

  return { option, projectData, handlePieClick, showDrawer, closeDraw, goDetailPage }
}


export const useRelevanceHook = (props: any, emits: any) => {
  let allNodes = props.data

  let nodeData: any[] = [];
  let linksData: any[] = [];

  function getNodeData() {
    nodeData = [];
    for (let node of allNodes) {
      let myNode: any = {};
      myNode.name = node.name;
      myNode.value = node.id;
      myNode.category = node.category;
      nodeData.push(myNode)
    }
  }

  function getLinksData() {
    linksData = [];
    for (let node of allNodes) {
      if (node.pid === 0) {
        continue;
      }
      let myNode: any = {};
      myNode.source = node.name;
      myNode.target = node.pname;
      // myNode.value = 50;
      myNode.relation = node.relation;
      myNode.sourceId = node.id;
      myNode.targetId = node.pid;
      myNode.lineStyle = {
        width: 2,
      }
      myNode.label = {
        show: true,
        formatter: (params: any) => {
          return params.data.relation;
        },
        fontSize: 20,
        color: "red"
      };
      linksData.push(myNode)
    }
  }

  getNodeData();
  getLinksData();
  const option: any = {
    title: {
      text: ''
    },
    series: [{
      type: 'graph',
      name: '关联图谱',
      layout: 'force',
      force: {
        repulsion: 1000,
        gravity: 0.001,
        edgeLength: 350,
        layoutAnimation: true,
      },
      categories: [
        {
          name: '一级',
          symbolSize: 150,
          label: {
            show: true,
            fontSize: 16,
            lineHeight: 20,
          }
        },
        {
          name: '二级',
          symbolSize: 100,
          label: {
            show: true,
            fontSize: 14
          }
        }
      ],
      label: {
        show: true,
        fontSize: 30
      },
      roam: true,
      draggable: true,
      data: nodeData,
      links: linksData,
    }],
  };


  const handlePieClick = (e: any) => {
    if (e.value == props.info.id) {
      return false
    } else {
      window.open(
        `${location.origin}/detail?id=${e.value}&searchType=2`,
        "_blank"
      );
    }
  }

  return { option, handlePieClick }
}
